<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
<style type="text/css">
#hui-header-sreach{width:75%; height:32px; padding:0px !important; line-height:32px; position:absolute; z-index:21; left:45px; top:22px;}
#hui-header-sreach input{width:100%; height:32px !important; line-height:32px !important; margin:0px !important; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:5px; border:0; background:#EFF3F6; font-size:14px; text-indent:30px;}
#hui-header-sreach::after{font-family:"hui-font"; content:'\e714'; display:block; position:absolute; z-index:22; width:28px height:32px; left:5px; top:0;}
#hui-hot-sreach{background:#FFFFFF; padding:10px;}
#hui-hot-sreach-title{line-height:38px; font-size:16px; font-weight:700;}
#hui-hot-sreach-keys{margin-top:8px;}
.hui-header{background: #188EEE;}
#hui-hot-sreach-keys a{display:block; border-radius:5px; float:left; margin:0 8px 8px 0px; padding:6px 10px; line-height:20px; font-size:13px; background:#EFF3F6;}
</style>
</head>
<body style="background:#F4F5F6;">
<header class="hui-header">
    <div id="hui-back"></div>
    <div id="hui-header-sreach">
        <input type="search" id="searchKey" placeholder="请输入商品关键字" />
    </div>
</header>
<div class="hui-wrap">
    <div id="hui-hot-sreach">
        <div id="hui-hot-sreach-title">热门搜索</div>
        <div id="hui-hot-sreach-keys">
            <a href="javascript:hotSearch('耳机');">耳机</a>
            <a href="javascript:hotSearch('手机');">手机</a>
            <a href="javascript:hotSearch('小米');">小米</a>
            <a href="javascript:hotSearch('免费');">免费</a>
            <a href="javascript:hotSearch('cpu');">cpu</a>
            <a href="javascript:hotSearch('特价');">特价</a>
            <a href="javascript:hotSearch('台式电脑');">台式电脑</a>
            <a href="javascript:hotSearch('摄像头');">摄像头</a>
        </div>
    </div>
    <div class="hui-media-list" style="padding:18px 5px;">
        <ul id="MainList"></ul>
    </div>
</div>
<script type="text/javascript" src="js/hui.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/hui-refresh-load-more.js" charset="UTF-8"></script>
<script type="text/javascript">
	
	hui.immersedStatusbar();
var page = 1, kwd;
//监听搜索按钮
document.getElementById('searchKey').addEventListener('keyup', function(e){
    if(e.keyCode == 13){//键盘==13时可以搜索
             searchNow();
             }
        });
//加载更多
hui.loadMore(searchBase);

function hotSearch(k){//开启热搜
    hui('#searchKey').val(k);
    searchNow();
}
function searchNow(){
    document.activeElement.blur();
    kwd = hui('#searchKey').val();
    kwd = kwd.trim();//清除空格
    if(kwd.length < 2){hui.toast('关键字至少2个字符'); return false;}
    page = 1;
    searchBase();
}
function searchBase(){
    if(page < 2){
        hui('#MainList').html('');
        hui.resetLoadMore();
    }
    hui.postJSON(
        'http://shop.hcoder.net/myApi.php',
        {act:"goodsSearch", page : page, k : kwd},
        function(res){
            huiJsonLog(res);
            hui.endLoadMore();//结束加载更多
            if(res.msg == 'null'){//结束加载更多
                hui.endLoadMore(true);
                return false;
            }
            if(res.msg == 'no'){
                hui.toast('没有搜索到商品');
                return;
            }
            for(var i = 0; i < res.msg.length; i++){
                var li = document.createElement('li');
                li.innerHTML = '<a href="javascript:showInfo(\''+res.msg[i].goods_id+'\');">'+
                    '<div class="hui-media-list-img"><img src="http://shop.hcoder.net/'+res.msg[i].goods_thumb+'" /></div>'+
                    '<div class="hui-media-content">'+
                        '<h1>['+res.msg[i].goods_id+'] '+res.msg[i].goods_name+'</h1>'+
                         '<p>￥'+res.msg[i].shop_price+'</p>'+
                    '</div>'
                '</a>';
                hui(li).appendTo('#MainList');
            }
            page++;
        }
    );
}
</script>
</body>
</html>